<template>
    <div class="wrapper">
        <img class="blog-img" :src="blog.coverImage" alt="">
        <div class="blog-content">
            <div class="blog-title">{{blog.title}}</div>
            <div class="blog-time">{{blog.date}}</div>
        </div>
    </div>
</template>

<script setup>

defineProps({
    blog: {
        type: Object,
        require: true
    }
})

</script>

<style lang="scss" scoped>

.wrapper {
    // background-color: purple;
    display: flex;
    flex-direction: row;
    margin: 0 5px;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;
    
    &:hover {
        transform: translateX(2px);
        // background-color: $bg-color-grey-shallow;
        .blog-title {
            color: var(--primary-color);
        }
    }
} 

.blog-img {
    width: 60px;
    height: 60px;
    margin: 4px 6px;
}

.blog-content {
    display: flex;
    flex-direction: column;
    padding-right: 5px;
    // background-color: orange;
}

.blog-title {
    margin-top: 3px;
    font-size: $font-size-small;
    // color: $text-color-333;
    // background-color: peru;
}

.blog-time {
    font-size: $font-size-tiny;
    // color: $text-color-777;
    // background-color: yellow;
}


</style>